<template>
  <div class="page-model" ref="modelwrap">
    <canvas id="model"></canvas>
    <!-- 保障点 -->
    <div v-show="tag == 1">
      <template v-for="(item, index) in support">
        <div class="support" :key="index" :id="'support' + index">
          <div class="mark">
            <span class="name">{{ item.name }}</span>
            <i
              :class="
                item.status == 0 ? 'support-img-blue' : 'support-img-orange'
              "
            ></i>
          </div>
          <div class="pop" v-show="item.popOpen">
            <div class="title">{{ item.name }}</div>
            <div
              class="u-p-t-22"
              v-for="(item2, index2) in item.data"
              :key="index2"
            >
              <div class="u-flex u-p-b-10">
                <div class="line u-m-r-10"></div>
                <span class="u-flex-1 u-font-28 white blod u-text-left">{{
                  item2.name
                }}</span>
                <span class="u-font-30 white blod">{{ item2.total }}</span>
                <span class="u-font-24 white">{{ item2.unit }}</span>
              </div>
              <div class="bar-wrap">
                <div
                  :class="['bar', 'barcolor' + item2.status]"
                  :style="{ width: item2.percent }"
                ></div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
    <!-- 灯杆 -->
    <div v-show="tag == 0">
      <!-- 路灯标签 -->
      <!-- <div id="lampMarker">
        <div id="lampName">111</div>
        <div id="lampNum">222</div>
      </div> -->
      <template v-for="(item, index) in lampPost">
        <div class="lampPost" :key="index" :id="'lampPost' + index">
          <!-- <div
            class="mark"
            :class="getLampMarkColor(item.status)"
            @click="item.popOpen = !item.popOpen"
          ></div> -->
          <div
            class="pop"
            :class="getLampPopColor(item.status)"
            v-show="item.popOpen"
          >
            <div class="title">
              <i :class="getLampIconColor(item.status)"></i>
              {{ item.name }}
            </div>
            <div class="content">{{ item.content }}</div>
            <div class="time">{{ item.time }}</div>
          </div>
        </div>
      </template>
    </div>
    <div
      class="menu u-flex u-row-between u-p-l-20"
      :class="menuShow ? 'menu-bg' : ''"
    >
      <template v-for="(item, index) in 6" v-if="menuShow">
        <i
          class="model-menu"
          :key="index"
          :class="['model-menu' + (index + 1), { active: tag == index }]"
          @click="menuHandle(index)"
        ></i>
      </template>
      <i class="model-menu7 u-m-l-10" @click="menuShow = !menuShow"></i>
    </div>
  </div>
</template>
<script>
import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import {
  CSS2DRenderer,
  CSS2DObject,
} from "three/examples/jsm/renderers/CSS2DRenderer.js";
var canvas = null;
var scene = null;
var directionalLight1 = null;
var directionalLight2 = null;
var ambient = null;
var camera = null;
var renderer = null;
var canvasWidth = null;
var canvasHeight = null;
var labelRenderer = null;
var controls = null;

// 射线拾取相关
var modelArray = []; // 保存所有的模型
var chooseMesh = null; // 鼠标单击射线拾取meshArr中的某个粮仓Mesh

// 路灯拾取
var lampArray = []; // 保存所有的模型
var chooseLamp = null; // 鼠标单击射线拾取meshArr中的某个粮仓Mesh

// 保障点标签组
var supplyGroup = new THREE.Group();
// 灯杆标签组
var lampGroup = new THREE.Group();
// 网关标签组
var gateGroup = new THREE.Group();

export default {
  name: "HomeView",
  data() {
    return {
      menuShow: false,
      tag: 0,
      // 保障点数据
      support: [
        {
          position: [80, 65, -60],
          name: "保障点1",
          status: "1",
          power: "CQLX0245",
          popOpen: false,
          data: [
            {
              name: "灯杆（13米）",
              status: "0",
              num: 2,
              total: 11,
              percent: "20%",
              unit: "基",
            },
            {
              name: "灯具（400W钠灯）",
              status: "1",
              num: 2,
              total: 20,
              percent: "60%",
              unit: "盏",
            },
            {
              name: "灯泡（400W）",
              status: "0",
              num: 2,
              total: 20,
              percent: "30%",
              unit: "盏",
            },
            {
              name: "灯泡（250W））",
              status: "0",
              num: 2,
              total: 10,
              percent: "40%",
              unit: "盏",
            },
            {
              name: "镇流器（400W）",
              status: "0",
              num: 2,
              total: 20,
              percent: "20%",
              unit: "个",
            },
            {
              name: "电缆（1.5平方）",
              status: "0",
              num: 2,
              total: 200,
              percent: "40%",
              unit: "米",
            },
            {
              name: "保险（10A）",
              status: "2",
              num: 2,
              total: 20,
              percent: "90%",
              unit: "个",
            },
            {
              name: "灯门（无轨灯门）",
              status: "0",
              num: 2,
              total: 11,
              percent: "30%",
              unit: "个",
            },
            {
              name: "灯口",
              status: "1",
              num: 2,
              total: 27,
              percent: "60%",
              unit: "个",
            },
          ],
        },
        {
          position: [-100, 40, 40],
          name: "保障点2",
          status: "0",
          power: "CQLX0245",
          popOpen: false,
          data: [
            {
              name: "灯杆（13米）",
              status: "0",
              num: 2,
              total: 11,
              percent: "20%",
              unit: "基",
            },
            {
              name: "灯具（400W钠灯）",
              status: "1",
              num: 2,
              total: 20,
              percent: "60%",
              unit: "盏",
            },
            {
              name: "灯泡（400W）",
              status: "0",
              num: 2,
              total: 20,
              percent: "30%",
              unit: "盏",
            },
            {
              name: "灯泡（250W））",
              status: "0",
              num: 2,
              total: 10,
              percent: "40%",
              unit: "盏",
            },
            {
              name: "镇流器（400W）",
              status: "0",
              num: 2,
              total: 20,
              percent: "20%",
              unit: "个",
            },
            {
              name: "电缆（1.5平方）",
              status: "0",
              num: 2,
              total: 200,
              percent: "40%",
              unit: "米",
            },
            {
              name: "保险（10A）",
              status: "2",
              num: 2,
              total: 20,
              percent: "90%",
              unit: "个",
            },
            {
              name: "灯门（无轨灯门）",
              status: "0",
              num: 2,
              total: 11,
              percent: "30%",
              unit: "个",
            },
            {
              name: "灯口",
              status: "1",
              num: 2,
              total: 27,
              percent: "60%",
              unit: "个",
            },
          ],
        },
      ],
      // 灯杆
      lampPost: [
        {
          name: "Sphere224",
          num: "Sphere224",
          title: "预警提示",
          status: "0",
          content: "系统监测到：T123456号杆电流电压异常：请及时检修。",
          time: "2022年3月15日  21:04",
          popOpen: false,
        },
        {
          name: "ld2",
          num: "222",
          title: "监测提示",
          status: "2",
          content: "系统监测到：T123456号杆电流电压恢复正常。",
          time: "2022年3月15日  21:04",
          popOpen: false,
        },
        {
          name: "ld3",
          num: "333",
          title: "派单提示",
          status: "1",
          content: "T123456号杆监测预警，系统已自动派单，运维1组。",
          time: "2022年3月15日  21:04",
          popOpen: false,
        },
        {
          name: "ld4",
          num: "4444",
          title: "回单提示",
          status: "3",
          content: "T123456号杆监测预警工单，运维1组已修复完成。",
          time: "2022年3月15日  21:04",
          popOpen: false,
        },
      ],
    };
  },
  mounted() {
    // 监听保障点事件
    this.support.forEach((v, i) => {
      document
        .querySelectorAll(".support .mark")
        [i].addEventListener("mousedown", () => {
          v.popOpen = !v.popOpen;
          // 传给父组件一个事件,切换内容为保障点的内容
          this.$emit("changepage", 1);
        });
    });
    // 监听灯杆事件
    // this.lampPost.forEach((v, i) => {
    //   document
    //     .querySelectorAll(".lampPost .mark")
    //     [i].addEventListener("mousedown", () => {
    //       v.popOpen = !v.popOpen;
    //     });
    // });

    canvas = document.querySelector("#model");
    // CANVAS尺寸
    canvasWidth = canvas.clientWidth;
    canvasHeight = canvas.clientHeight;

    canvas.addEventListener("mousedown", () => {
      this.animationStatus = false;
    });

    canvas.addEventListener("mouseup", () => {
      setTimeout(() => {
        this.animationStatus = true;
      }, 1000);
    });
    // 灯杆状态实时数据接口
    this.getClientOntimeDataList();

    // 初始化模型
    this.initModel();
  },
  methods: {
    // 获取灯杆标签颜色
    getLampMarkColor(status) {
      let mark = "";
      switch (status) {
        case "0":
          mark = "mark-y";
          break;
        case "1":
          mark = "mark-r";
          break;
        case "2":
          mark = "mark-g";
          break;
        case "3":
          mark = "mark-r";
          break;
      }
      return mark;
    },
    // 获取灯杆标签颜色
    getLampPopColor(status) {
      let pop = "";
      switch (status) {
        case "0":
          pop = "pop-p";
          break;
        case "1":
          pop = "pop-purple";
          break;
        case "2":
          pop = "pop-g";
          break;
        case "3":
          pop = "pop-r";
          break;
      }
      return pop;
    },
    // 获取灯杆标签颜色
    getLampIconColor(status) {
      let icon = "";
      switch (status) {
        case "0":
          icon = "icon-p";
          break;
        case "1":
          icon = "icon-purple";
          break;
        case "2":
          icon = "icon-g";
          break;
        case "3":
          icon = "icon-r";
          break;
      }
      return icon;
    },
    // 初始化模型
    initModel() {
      // 添加模型
      const loader = new GLTFLoader();
      // 创建解码器实例
      const dracoLoader = new DRACOLoader();
      // 设置解压库文件路径
      dracoLoader.setDecoderPath(process.env.BASE_URL + "draco/");
      dracoLoader.setDecoderConfig({ type: "js" });
      // 加载解码器实例
      loader.setDRACOLoader(dracoLoader);
      loader.load(
        process.env.BASE_URL + "model/raw-processed.glb",
        (gltf) => {
          gltf.scene.traverse(function (object) {
            if (object.type === "Mesh") {
              // 批量设置网格材质
              object.material = new THREE.MeshLambertMaterial({
                map: object.material.map,
                color: object.material.color,
              });
            }
          });

          // 保存所有的模型
          var group = gltf.scene.getObjectByName("Scene");
          group.traverse(function (obj) {
            // 获取mesh类型的对象集合
            if (obj.type === "Mesh") {
              modelArray.push(obj);
            }
            // 获取路灯的对象集合
            if (obj.name.includes("Sphere224")) {
              lampArray.push(obj);
            }
          });

          //创建场景实例
          scene = new THREE.Scene();
          scene.environment = scene.add(gltf.scene);
          scene.position.x = 0;
          scene.position.y = 0;
          // gltf.scene.layers.enableAll();

          // 光源
          directionalLight1 = new THREE.DirectionalLight(0xffffff, 0.6);
          directionalLight1.position.set(400, 200, 300);
          scene.add(directionalLight1);
          // directionalLight1.layers.enableAll();
          directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.6);
          directionalLight2.position.set(-400, -200, -300);
          scene.add(directionalLight2);
          // directionalLight2.layers.enableAll();
          ambient = new THREE.AmbientLight(0xffffff, 0.5);
          scene.add(ambient);
          // ambient.layers.enableAll();

          // 透视相机
          camera = new THREE.PerspectiveCamera(
            40,
            canvasWidth / canvasHeight,
            1,
            15000
          );
          //  默认情况下，调用scene.add()，物体将会被添加到(0,0,0)坐标。但将使得摄像机和立方体彼此在一起。为了防止这种情况的发生，我们只需要将摄像机稍微向外移动一些即可。
          camera.position.set(
            256.8151480430156,
            208.20332831998888,
            98.33886660951474
          );
          camera.lookAt(new THREE.Vector3(0, 0, 0));
          // camera.layers.enableAll();
          // camera.layers.toggle(1);

          // 渲染器
          renderer = new THREE.WebGLRenderer({
            antialias: true, //消除锯齿
            canvas: canvas,
            alpha: true, //如果需要透明度，则需要设为true
          });
          renderer.setPixelRatio(window.devicePixelRatio);
          renderer.setSize(canvasWidth, canvasHeight);
          /* 引擎假定所有输入颜色值都在线性空间中。
          并且每个片段的最终颜色值不被变换到输出颜色空间中。
          由于不同的原因，这种工作流是有问题的。
          原因之一是您的JPG纹理很可能是sRGB编码的，以及许多其他纹理。
          要在片段着色器中计算正确的颜色，重要的是将所有输入颜色值转换到相同的颜色空间(这是线性颜色空间)。
          可以告知渲染器将片段着色器中的最终颜色值从线性颜色空间转化为sRGB颜色空间。
          因此，当纹理包含sRGB编码的数据时，还必须告知渲染器。 */
          renderer.outputEncoding = THREE.sRGBEncoding;

          this.setMark();

          // 创建CSS2DRenderer渲染器
          labelRenderer = new CSS2DRenderer();
          labelRenderer.setSize(canvasWidth, canvasHeight);
          labelRenderer.domElement.style.position = "absolute";
          labelRenderer.domElement.style.top = "0";
          labelRenderer.domElement.style.left = "0";
          labelRenderer.domElement.style.pointerEvents = "auto";
          labelRenderer.domElement.id = "domParent";

          this.$refs.modelwrap.appendChild(labelRenderer.domElement);

          // //添加提示框
          // let test = this.addTag("test");
          // scene.add(test);

          // test.element.style.visibility = "visible";
          // test.position.copy({
          //   x: -15.168663024902344,
          //   y: -33.388275146484375,
          //   z: -8.873809814453125,
          // });

          // 控制器
          controls = new OrbitControls(camera, labelRenderer.domElement);
          controls.update();

          // 坐标辅助对象
          // const axesHelper = new THREE.AxesHelper(500);
          // scene.add(axesHelper);
          // // 相机辅助对象
          // const cameraHelper = new THREE.CameraHelper(camera);
          // scene.add(cameraHelper);

          // 执行渲染
          this.renderModel();

          //
          addEventListener("click", this.choose);
        },
        undefined,
        function (error) {
          console.error(error);
        }
      );
    },
    // 渲染函数
    /*  渲染循环
      在这里我们创建了一个使渲染器 能够在每次屏幕刷新时对场景进行绘制的循环
      （在大多数屏幕上，刷新率一般是60次/秒） */
    renderModel() {
      labelRenderer.render(scene, camera);
      renderer.render(scene, camera);
      // console.log(scene);
      requestAnimationFrame(this.renderModel);
    },
    setMark() {
      // 创建保障点标签css2dobject
      this.support.forEach((v, i) => {
        let supportLabel = new CSS2DObject(
          document.getElementById("support" + i)
        );
        supportLabel.position.set(v.position[0], v.position[1], v.position[2]);
        supportLabel.name = "support" + i;
        supplyGroup.add(supportLabel);
      });
      scene.add(supplyGroup);

      // 创建路灯标签
      console.log("lampArray", lampArray);
      lampArray.forEach((v) => {
        let lampDiv = document.createElement("div");
        lampDiv.id = "lampMarker";
        let html = ` <div id="lampName">${v.name}</div>
        <div id="lampNum">${v.name}</div>`;
        lampDiv.innerHTML = html;
        let lampLabel = new CSS2DObject(lampDiv);
        scene.updateMatrixWorld(true);
        v.getWorldPosition(lampLabel.position);
        lampGroup.add(lampLabel);
      });
      console.log("lampGroup", lampGroup);
      scene.add(lampGroup);
    },
    // 创建路灯弹窗css2d对象css2dobject
    lampPopCSS2DObject(name) {
      // 创建CSS2DObject
      // 灯杆
      // name = name.replace("LD", "");
      let lamp = this.lampPost.find((v, i) => {
        return v.num == name;
      });
      let popDiv = document.createElement("div");
      let popColor = this.getLampPopColor(lamp.status);
      let iconColor = this.getLampIconColor(lamp.status);
      popDiv.class = `lamp-pop ${popColor}`;
      let html = `
       <div class="title">
              <i class="${iconColor}"></i>
              ${lamp.title}
            </div>
            <div class="content">${lamp.content}</div>
            <div class="time">${lamp.time}</div>
      `;
      popDiv.innerHTML = html;
      let lampLabel = new CSS2DObject(popDiv);
      // lampLabel.layers.set(0);
      return lampLabel;
    },
    // 将dom元素包装为CSS2模型对象CSS2DObject
    addTag(domID) {
      let label = new CSS2DObject(document.getElementById(domID));
      label.name = "domLabel";
      return label;
    },
    // 射线拾取
    choose(event) {
      var Sx = event.clientX; //鼠标单击位置横坐标
      var Sy = event.clientY; //鼠标单击位置纵坐标
      //屏幕坐标转WebGL标准设备坐标
      var x = (Sx / window.innerWidth) * 2 - 1; //WebGL标准设备横坐标
      var y = -(Sy / window.innerHeight) * 2 + 1; //WebGL标准设备纵坐标
      //创建一个射线投射器`Raycaster`
      var raycaster = new THREE.Raycaster();
      //通过鼠标单击位置标准设备坐标和相机参数计算射线投射器`Raycaster`的射线属性.ray
      raycaster.setFromCamera(new THREE.Vector2(x, y), camera);
      //返回.intersectObjects()参数中射线选中的网格模型对象

      // 未选中对象返回空数组[],选中一个数组1个元素，选中两个数组两个元素
      var intersects = raycaster.intersectObjects(modelArray);
      // intersects.length大于0说明，说明选中了模型
      if (intersects.length > 0) {
        chooseMesh = intersects[0].object;
        chooseMesh.point = intersects[0].point;
        // 打印鼠标点击模型的位置（3D坐标）
        console.log("chooseMesh", chooseMesh);
        // console.log(chooseMesh.position);
      } else {
        chooseMesh = null;
      }

      // 射线拾取灯杆 弹出灯杆弹窗
      var intersects2 = raycaster.intersectObjects(lampArray);
      console.log("lampArray", lampArray);
      console.log("intersects2", intersects2);
      // intersects2.length大于0说明，说明选中了模型
      if (intersects2.length > 0) {
        chooseLamp = intersects2[0].object;
        chooseLamp.point = intersects2[0].point;

        // 打印鼠标点击模型的位置（3D坐标）
        console.log("chooseLamp", chooseLamp);
        let lampPop = this.lampPopCSS2DObject(chooseLamp.name);
        chooseLamp.getWorldPosition(lampPop.position);
        scene.add(lampPop);
      } else {
        chooseLamp = null;
      }
    },
    // 屏幕缩放模型缩放
    onWindowResize() {
      camera.aspect = window.innerWidth / window.innerHeight;

      camera.updateProjectionMatrix();

      renderer.setSize(window.innerWidth, window.innerHeight);

      labelRenderer.setSize(window.innerWidth, window.innerHeight);
    },
    // 切换菜单
    menuHandle(index) {
      this.tag = index;
      console.log(typeof index);
      switch (this.tag) {
        case 0:
          supplyGroup.children.forEach((v) => {
            v.visible = !v.visible;
          });
          break;
        case 1:
          lampGroup.children.forEach((v) => {
            v.visible = !v.visible;
          });
          break;
        case 5:
          this.launchFullScreen();
          break;
      }
    },
    // 切换全屏
    launchFullScreen() {
      const isFullScreen =
        document.fullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement;
      if (!isFullScreen) {
        if (document.body.requestFullscreen) {
          document.body.requestFullscreen();
        } else if (document.body.mozRequestFullScreen) {
          document.body.mozRequestFullScreen();
        } else if (document.body.webkitRequestFullscreen) {
          document.body.webkitRequestFullscreen();
        } else if (document.body.msRequestFullscreen) {
          document.body.msRequestFullscreen();
        }
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        }
      }
    },
    // 灯杆状态实时数据接口
    getClientOntimeDataList() {
      this.$api.get(this.$api.clientOntimeDataList).then((res) => {
        console.log(res);
        if (res.data && res.data.length) {
          // let data = {
          //   name: "回单提示",
          //   content: "T123456号杆监测预警工单，运维1组已修复完成。",
          //   time: "2022年3月15日  21:04",
          //   popOpen: false,
          // };
          Object.assign(res.data, data);
          res.data.forEach((v, i) => {
            v.position = [
              -112.41362762451172, -21.827075958251953, 108.74737548828125,
            ];
          });
          this.lampPost = res.data;
        }
      });
    },
  },
};
</script>
<style lang="scss">
#test {
  width: 150px;
  height: 150px;
  background-color: #ff7454;
  visibility: hidden;
}

.hover {
  cursor: pointer;

  &:hover {
    opacity: 0.8;
  }
}

.page-model {
  width: 100%;
  height: 100%;
  position: relative;

  canvas {
    width: 100%;
    height: 100%;
  }

  .menu {
    position: absolute;
    right: 85px;
    bottom: 0;
    width: auto;
    height: 107px;

    z-index: 9;
  }
  .menu-bg {
    background: url(../../../assets/images/model-menu-bg.png) no-repeat center;
    background-size: 100% 100%;
  }
}

.support {
  width: 234px;
  height: 155px;
  position: relative;
  z-index: 0;

  .mark {
    @extend .hover;

    .name {
      display: inline-block;
      margin-left: 60px;
      font-size: 36px;
      font-family: PingFang SC;
      color: #ffffff;
      transform: rotateY(10deg) rotateZ(20deg);
    }

    .support-img-orange {
      pointer-events: auto !important;

      display: block;
      width: 234px;
      height: 151px;
      background: url(@/assets/images/icon-bzo.png) no-repeat center;
      background-size: 100% 100%;
    }

    .support-img-blue {
      pointer-events: auto !important;
      display: block;
      width: 234px;
      height: 155px;
      background: url(@/assets/images/icon-bz.png) no-repeat center;
      background-size: 100% 100%;
    }
  }

  .pop {
    position: absolute;
    top: 0;
    right: 240px;
    width: 500px;
    padding: 20px;
    background: rgba(3, 14, 26, 0.78);

    &:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: rgba(102, 153, 255, 1);
    }

    .title {
      font-size: 36px;
      color: rgba(206, 221, 251, 1);
      padding-bottom: 20px;
      border-bottom: 1px solid rgba(196, 230, 250, 0.5);
      position: relative;
    }

    .line {
      width: 3px;
      height: 26px;
      background: #439de3;
      border-radius: 2px;
    }

    .bar-wrap {
      width: 100%;
      height: 20px;
      border: 1px solid #5487db;
      border-radius: 10px;
      padding: 3px 5px 0;

      .bar {
        height: 10px;
        border-radius: 5px;
        position: relative;

        &:after {
          content: "";
          display: block;
          position: absolute;
          right: 0;
          top: 0;
          width: 10px;
          height: 10px;
          background: #ffffff;
          border-radius: 50%;
          box-shadow: 0 0 10px #fff;
        }
      }

      .barcolor0 {
        background: linear-gradient(90deg, #66ccff 0%, #3399ff 100%);
      }

      .barcolor1 {
        background: linear-gradient(90deg, #ffd899 0%, #ffce7d 100%);
      }

      .barcolor2 {
        background: linear-gradient(90deg, #ff8266 0%, #ff7454 100%);
      }
    }
  }
}

.lampPost {
  width: 78px;
  height: 78px;
  position: relative;
  left: 700px;
  top: -600px;

  .mark-g {
    width: 78px;
    height: 78px;
    background: url(@/assets/images/model/lamp-g.png) no-repeat center;
    background-size: 100% 100%;
    @extend .hover;
  }

  .mark-r {
    width: 78px;
    height: 78px;
    background: url(@/assets/images/model/lamp-r.png) no-repeat center;
    background-size: 100% 100%;
    @extend .hover;
  }

  .mark-y {
    width: 78px;
    height: 78px;
    background: url(@/assets/images/model/lamp-y.png) no-repeat center;
    background-size: 100% 100%;
    @extend .hover;
  }
}
// 路灯名字的标签
#lampMarker {
  font-size: 24px;
  background: rgb(80, 125, 253);
  color: rgb(255, 255, 255);
  padding: 10px;
}

// 路灯弹窗
.lamp-lamp-pop {
  position: absolute;
  top: 0;
  right: 88px;
  width: 363px;
  height: 260px;
  padding: 48px 20px 0;
  .icon-g {
    width: 23px;
    height: 25px;
    background: url(@/assets/images/model/icon-g.png) no-repeat center;
    background-size: 100% 100%;
  }

  .icon-b {
    width: 21px;
    height: 23px;
    background: url(@/assets/images/model/icon-b.png) no-repeat center;
    background-size: 100% 100%;
  }

  .icon-r {
    width: 26px;
    height: 25px;
    background: url(@/assets/images/model/icon-r.png) no-repeat center;
    background-size: 100% 100%;
  }

  .icon-p {
    width: 23px;
    height: 23px;
    background: url(@/assets/images/model/icon-p.png) no-repeat center;
    background-size: 100% 100%;
  }

  .icon-purple {
    width: 27px;
    height: 24px;
    background: url(@/assets/images/model/icon-purple.png) no-repeat center;
    background-size: 100% 100%;
  }

  .title {
    font-size: 24px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #e6ebfa;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(170, 183, 215, 0.35);
    position: relative;
    display: flex;
    align-content: center;

    i {
      margin-right: 5px;
    }
  }

  .content {
    height: 107px;
    border-bottom: 1px solid rgba(170, 183, 215, 0.35);
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #e6ebfa;
    line-height: 30px;
    overflow: hidden;
    padding: 18px 0;
  }

  .time {
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #e6ebfa;
    padding-top: 18px;
  }
}

.pop-g {
  background: url(@/assets/images/model/pop-g.png) no-repeat center;
  background-size: 100% 100%;
}

.pop-p {
  background: url(@/assets/images/model/pop-p.png) no-repeat center;
  background-size: 100% 100%;
}

.pop-r {
  background: url(@/assets/images/model/pop-r.png) no-repeat center;
  background-size: 100% 100%;
}

.pop-b {
  background: url(@/assets/images/model/pop-b.png) no-repeat center;
  background-size: 100% 100%;
}

.pop-purple {
  background: url(@/assets/images/model/pop-purple.png) no-repeat center;
  background-size: 100% 100%;
}

// 模型菜单
</style>
